<!--
 * @author: 十一
 * @since: 2024-10-27
 * index.vue
 * @desc: new page
-->
<template>
  <div class="datav-container">
    <div class="datav-content">
      <dv-full-screen-container>
        <dv-loading v-if="loading">
          <div style="color: #ffffff">正在加载中...</div>
        </dv-loading>
        <div v-else>
          <!-- 头部 -->
          <ChartHeader />
          <div class="border-box8-container">
            <dv-border-box8 :dur="5">
              <div class="group">
                <div class="group-left">
                  <dv-border-box10>
                    <div class="card" style="height: 100%;">
                      <div class="card-title">柱状图</div>
                      <BarChart />
                      <div class="card-title">雷达图</div>
                      <RadarChart/>
                      <div class="card-title">仪表盘</div>
                      <DashboardChart/>
                    </div>
                  </dv-border-box10>
                </div>
                <div class="group-right">
                  <div class="group-right-chart">
                    <div class="chart1">
                      <dv-border-box1>
                        <div class="card" style="height: 100%;">
                              <div class="card-title">折线图</div>
                              <LineChart />
                            </div>

                      </dv-border-box1>
                    </div>
                    <div class="chart2">
                      <dv-border-box12>
                        <div class="card" style="height: 100%;">
                              <div class="card-title">饼状图</div>
                              <PieChart/>
                            </div>
                      </dv-border-box12>
                    </div>
                  </div>
                  <div class="chart3">
                    <dv-border-box13>
                      <div class="chart-footer">
                        <div class="chart-footer-item">
                          <dv-border-box7>
                            <div class="card" style="height: 100%;">
                              <div class="card-title">胶囊柱图</div>
                              <CapsuleChart />
                            </div>
                          </dv-border-box7>
                        </div>
                        <div class="chart-footer-item">
                          <dv-border-box7>
                            <div class="card" style="height: 100%;">
                              <div class="card-title">动态环图</div>
                              <ActiveRingChart />
                            </div>
                          </dv-border-box7>
                        </div>
                        <div class="chart-footer-item">
                          <dv-border-box7>
                            <div class="card" style="height: 100%;">
                              <div class="card-title">锥形柱图</div>
                              <ConicalColumnChart />
                            </div>
                          </dv-border-box7>
                        </div>
                        <div class="chart-footer-item">
                          <dv-border-box7>
                            <div class="card" style="height: 100%;">
                              <div class="card-title">排名轮播</div>
                              <ScrollRankingChart />
                            </div>
                          </dv-border-box7>
                        </div>
                      </div>
                    </dv-border-box13>
                  </div>
                </div>
              </div>
            </dv-border-box8>
          </div>
        </div>
      </dv-full-screen-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ChartHeader from "./components/Chart-Header.vue";
import BarChart from "./components/BarChart.vue";
import LineChart from "./components/LineChart.vue";
import PieChart from "./components/PieChart.vue";
import RadarChart from "./components/RadarChart.vue";
import DashboardChart from "./components/DashboardChart.vue";
import percentChart from "./components/percentChart.vue";
import WaterLevelChart from "./components/WaterLevelChart.vue";
import ScrollRankingChart from "./components/ScrollRankingChart.vue";
import CapsuleChart from "./components/CapsuleChart.vue";
import ActiveRingChart from "./components/ActiveRingChart.vue";
import ConicalColumnChart from "./components/ConicalColumnChart.vue";
const loading = ref(false);
setTimeout(()=>{
  loading.value = false
},2000)
</script>

<style lang="less" scoped>
.card {
  padding: 30px;
  .card-title {
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
  }
}
.group {
  padding: 15px;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  .group-left {
    width: 25%;
    height: 100%;
  }
  .group-right {
    width: 100%;
    height: 100%;
    margin-left: 5px;
    display: flex;
    flex-direction: column;

    .group-right-chart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60%;
      .chart1 {
        width: 70%;
        height: 100%;
      }
      .chart2 {
        margin-left: 5px;
        width: 30%;
        height: 100%;
      }
    }
    .chart3 {
      height: 40%;
      width: 100%;
      margin-top: 5px;
      .chart-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 20px;
        .chart-footer-item {
          height: 100%;
          width: 100%;
          margin-left: 15px;
        }
        .chart-footer-item:first-child {
          margin-left: 0;
        }
      }
    }
  }
}
.border-box8-container {
  height: calc(100vh - 100px); //减去header高度100
  // padding: 15px;
  // padding-top: 0;
}

.datav-container {
  height: 100vh;
  width: 100%;
  background-color: #030409;
  .datav-content {
    background-image: url("./images/bg.png");
    background-size: 100% 100%;
    height: 100vh;
  }
}
</style>
